import { trendColumn, trendLine } from '@/services/api/api-analysis';
import { Line,Column } from '@ant-design/charts';
import { Skeleton, Spin } from 'antd';
import { useEffect, useState } from 'react';

interface TrendCuesColumnCardProps {
  type: string
  organizationTopId: string
  dates: string[]
}

const TrendCuesColumnCard: React.FC<TrendCuesColumnCardProps> = (props) => {

  const { type, organizationTopId, dates } = props;

  const [loading, setLoading] = useState(true);
  const [skeletonLoadding, setSkeletonState] =
    useState<boolean>(true);

  const [dataTrendLine, setDataTrendLineState] =
    useState<AnalysisData.TrendLine[]>();

  const [dataTrendColumn, setDataTrendColumnState] =
    useState<AnalysisData.TrendColumn[]>();


  const configLine = {
    data: dataTrendLine,
    xField: 'label',
    yField: 'value',
    seriesField: 'type',
    yAxis: {
      label: {
        formatter: (v) => `${v} 分`,
      },
    },
    legend: {
      position: 'top',
      itemHeight: 18
    },
    smooth: true,
    // @TODO 后续会换一种动画方式
    animation: {
      appear: {
        animation: 'path-in',
        duration: 3000,
      },
    },
  };


  const config = {
    data: dataTrendColumn,
    isGroup: true,
    autoFit: true,
    seriesField: 'type',
    legend: { itemHeight: 20 },
    xField: 'date',
    yField: 'count',
    // isStack: true,
    color: ['#62D9AB', '#6294FA'],
    slider: {
      start: "0.6",
      edd: "0"
    },
    limitInPlot: false,
    padding: [40, 10, 80, 0],
    // meta: {
    //   time: {
    //     sync: false, // 开启之后 slider 无法重绘
    //   },
    // },
    label: {
      // 可手动配置 label 数据标签位置
      styles: {
        fill: '#FFFFFF',
      },
      position: 'middle',
      layout: [
        // 柱形图数据标签位置自动调整
        {
          type: 'interval-adjust-position',
        }, // 数据标签防遮挡
        {
          type: 'interval-hide-overlap',
        }, // 数据标签文颜色自动调整
        {
          type: 'adjust-color',
        },
      ],
    },
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
      },
      
    }
  };

  //chengchanghong
  /**
   * 综合传播影响力
   * @param key
   */
  const loadTrendLineData = async () => {
    try {
      const response = await trendLine({ dates, organizationTopId });
      if (response.code === 0) {
        setDataTrendLineState(response.data);
      }
      setLoading(false)
      setSkeletonState(false)
    } catch (error) { }
  };


  //chengchanghong
  /**
   * 线索征集
   * @param key
   */
  const loadTrendColumnData = async () => {
    try {
      const response = await trendColumn({ type, organizationTopId });
      if (response.code === 0) {
        setDataTrendColumnState(response.data);
      }
      setLoading(false)
      setSkeletonState(false)
    } catch (error) { }
  };



  useEffect(() => {
    if (type === '0') {
      setLoading(true)
      loadTrendLineData()
    }
  }, [organizationTopId, dates]);

  useEffect(() => {
    setLoading(true)
    if (type === '0') {
      loadTrendLineData()
    } else {
      loadTrendColumnData();
    }
  }, [type]);

  return (<>
    <Skeleton avatar title={false} loading={skeletonLoadding} active>
      <Spin spinning={loading}>
        {type === '0' ? <>{loading == false && <Line {...configLine} />}</> : <>{dataTrendColumn && <Column {...config} />}</>}
      </Spin>
    </Skeleton>
  </>);
};

export default TrendCuesColumnCard;
